<template>
    <div v-loading="loading">
        <el-card>
            <h1>团费查询</h1>
            <span>{{GroupFeeInfo.name}}</span>
            <el-divider></el-divider>
            <div class="xx-tags">
                <xx-tag title="应交费团员数" :content="GroupFeeInfo.total"></xx-tag>
                <xx-tag title="已交团员数" :content="GroupFeeInfo.paidIn"></xx-tag>
                <xx-tag title="未交团员数" :content="GroupFeeInfo.unpaid"></xx-tag>
            </div>
            <el-divider></el-divider>
            <span>更新时间：{{GroupFeeInfo.updateTimeStr===null?'暂未更新,请耐心等待':GroupFeeInfo.updateTimeStr}}</span>
        </el-card>
        <el-card>
            <el-badge :value="Nopays.length">
                <span>未交名单[实时]</span>
            </el-badge>
            <el-divider></el-divider>
            <div class="el-tags">
                <el-tag v-for="(item, i) in Nopays" :key="i">{{item.memberName}}</el-tag>
            </div>
        </el-card>
        <el-card>
            <span>已交名单[实时]</span>
            <el-divider></el-divider>
            <div class="el-tags">
                <el-badge v-for="(item, i) in pays" :key="i" value="优秀" style="margin:0px 20px;">
                    <el-tag type="success" >{{item.memberName}}</el-tag>
                </el-badge>
            </div>
        </el-card>
    </div>

</template>

<script>
import XxTag from '../../components/XxTag.vue'
export default {
    components: {
        XxTag
    },
    data() {
        return {
            GroupFeeInfo: {},
            loading: true,
            Nopays: [],
            pays: []
        }
    },
    mounted() {
        this.getGroupFee(this.getCustomTime(), this.$store.state.oid)
        this.getPaymentStatisticsDetails(1, 100, this.$store.state.oid, this.getCustomPaymentTime())
    },
    methods: {
        getCustomTime() {
            const now = new Date()
            return `${now.getFullYear()}${now.getMonth() < 9 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1}`
        },
        getCustomPaymentTime() {
            const now = new Date()
            return `${now.getFullYear()}-${now.getMonth() < 9 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1}`
        },
        async getGroupFee(date, oid, t = 1627744695868) {
            const res = await fetch(`https://tuanapi.12355.net/api/v1/admin/group-fee/date/${date}?date=${date}&sub=0&param=${oid}&_=${t}`, {
                headers: {
                    accept: 'application/json, text/javascript, */*; q=0.01',
                    'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
                    authorize_name: '15616656',
                    'sec-ch-ua': '"Chromium";v="92", " Not A;Brand";v="99", "Microsoft Edge";v="92"',
                    'sec-ch-ua-mobile': '?0',
                    'sec-fetch-dest': 'empty',
                    'sec-fetch-mode': 'cors',
                    'sec-fetch-site': 'same-site'
                },
                referrer: 'https://tuan.12355.net/',
                referrerPolicy: 'strict-origin-when-cross-origin',
                body: null,
                method: 'GET',
                mode: 'cors',
                credentials: 'include'
            })
            const temp = await res.json()
            this.GroupFeeInfo = temp.listData[0]
            console.log(temp.listData[0])
        },
        async getPaymentStatisticsDetails(pageNo = 1, pageSize = 100, oid, month, t = 1627785709257) {
            const res = await fetch(`https://tuanapi.12355.net/bg/getPaymentStatisticsDetails?pageNo=${pageNo}&pageSize=${pageSize}&oid=${oid}&month=${month}&_=${t}`, {
                headers: {
                    accept: 'application/json, text/javascript, */*; q=0.01',
                    'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6',
                    'sec-ch-ua': '"Chromium";v="92", " Not A;Brand";v="99", "Microsoft Edge";v="92"',
                    'sec-ch-ua-mobile': '?0',
                    'sec-fetch-dest': 'empty',
                    'sec-fetch-mode': 'cors',
                    'sec-fetch-site': 'same-site'
                },
                referrer: 'https://tuan.12355.net/',
                referrerPolicy: 'strict-origin-when-cross-origin',
                body: null,
                method: 'GET',
                mode: 'cors',
                credentials: 'include'
            })
            const json = await res.json()
            const Nopays = json.rows.filter((e) => {
                if (e.pay == 0) {
                    return e
                }
            })
            const pays = json.rows.filter((e) => {
                if (e.pay == 1) {
                    return e
                }
            })
            this.Nopays = Nopays
            this.pays = pays
            this.loading = false
            return { pays, Nopays }
        }
    }
}
</script>

<style>

</style>
